<template>
  <div>
    <div>
      输入数据：<input v-model="inputVal"/>
      输入内容：{{ inputVal }}
    </div>
    <div>
      ------------------------------------------------
    </div>
    <div>
      <!-- v-model语法糖-->
      v-model语法糖: <input :value="inputVal2" @input="inputVal2 = $event.target.value"/>
      组件输入内容：{{ inputVal2 }}
    </div>
    <div>
      ------------------------------------------------
    </div>
    <div>
      <!-- @input="getInputData" 可以省略-->
      <custom-input v-model="inputVal3" @input="getInputData"/>
      组件输入内容：{{ inputVal3 }}
    </div>
  </div>
</template>
<script>
import CustomInput from '@/views/form/CustomInput.vue'

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputVal: 'inputVal',
      inputVal2: 'inputVal2',
      inputVal3: 'inputVal3',
    };
  },
  methods: {
    getInputData(data) {
      console.log(data, this.inputVal3)
    }
  }
}
</script>
